<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <div class="a" id="box"><a href="">我是div</a></div>
    <p>我是段落1</p>
    <p class="a">我是段落</p>

    <input type="text" name="username" value="我是文本框">
    <input type="text" name="username" value="我是文本框">
    <input class="a" type="text" name="username" value="我是文本框">

</body>

</html>
<!-- 将js代码放到后面  顺序渲染时才可以获取 -->

<script>
    /* 
    HTML中Element对象可以通过Document对象获取，而document对象通过window对象获取
    document对象提供了多个get方法获取元素对象(标签)：
    -getElementById("id的值")：根据id获取元素对象
    -getElementsByTagName("标签名")：根据标签名获取元素对象集合
    -getElementsByName("name属性的值")：根据name属性获取元素对象集合
    -getElementsByClassName("class属性的值")：根据class属性获取元素对象集合

    html5补充：
    document.querySelector("选择器")：获取满足选择器第一个对象
    document.querySelectorAll("选择器")：获取满足选择器的所有对象集合



    
    */

    //window.document  可以省略window document
    //1.根据id获取元素对象
    var div = document.getElementById("box");
    //alert(div.innerHTML);//获取div标签的html内容
    //div.innerHTML = "<h1>我是修改后的内容</h1>";//设置html

    //alert(div.innerText);//获取div标签的文本内容
    //div.innerText = "<h1>我是修改后的内容</h1>";//设置文本有标签识别为文字


    //2.根据标签名获取对象  集合
    var ps = document.getElementsByTagName("p");
    //alert(ps[0].innerHTML);

    //3.根据标签的name属性获取元素对象集合
    var usernames = document.getElementsByName("username");
    //alert(usernames[0].value);//获取value属性
    //设置文本框value属性的值
    usernames[1].value="我是设置过的内容";

    //4.根据标签的class属性获取元素的集合
    var a = document.getElementsByClassName("a");
    //alert(a[1].innerHTML);

    //html5中新增获取元素的方法
    //获取id为box的第一个元素对象
    var div= document.querySelector("#box")
    //获取class为a的第一个元素 不是集合 一个对象
    var as1= document.querySelector(".a")
    // var div= document.querySelector("p")
    // var div= document.querySelector("#box > a")

   


    //获取class为a的全部元素 集合
    var as2 = document.querySelectorAll(".a")
    //alert(as1[1].innerHTML);//尝试获取单个对象中的第二个值 ×
    alert(as2[1].innerHTML);//尝试获取多个对象中的第二个值

</script>